<!DOCTYPE html>
<html>

<!-- Head -->

<head>

	<title>登录/注册</title>

	<!-- Meta-Tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<script type="application/x-javascript">
		addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
	</script>
	<!-- //Meta-Tags -->

	<!-- Style -->
	<link rel="stylesheet" href="css/login_style.css" type="text/css" media="all">

</head>
<!-- //Head -->

<!-- Body -->

<body>

	<h1><a class="btn" onclick="history.go(-1)">←</a>&nbsp;&nbsp;登录/注册</h1>

	<div class="container w3layouts agileits">

		<div class="login w3layouts agileits">
			<h2>登 录</h2>
			<form id="loginForm">
				<input type="text" Name="userName" placeholder="用户名" required="">
				<input type="password" Name="password" placeholder="密码" required="">
			</form>
			<ul class="tick w3layouts agileits">
				<li>
					<input type="checkbox" id="brand1" value="">
					<label for="brand1"><span></span>记住我</label>
				</li>
			</ul>
			<div class="send-button w3layouts agileits">
				<form action="index.html">
					<input type="button" onclick="submitForm()" value="登 录">
				</form>
			</div>
<!--			<form action="#" method="post">-->
<!--				<input type="text" Name="Userame" placeholder="用户名" required="">-->
<!--				<input type="password" Name="Password" placeholder="密码" required="">-->
<!--			</form>-->
<!--			<ul class="tick w3layouts agileits">-->
<!--				<li>-->
<!--					<input type="checkbox" id="brand1" value="">-->
<!--					<label for="brand1"><span></span>记住我</label>-->
<!--				</li>-->
<!--			</ul>-->
<!--			<div class="send-button w3layouts agileits">-->
<!--				<form action="index.html">-->
<!--					<input type="submit" value="登 录">-->
<!--				</form>-->
<!--			</div>-->
			<a href="#">记住密码?</a>
			<div class="social-icons w3layouts agileits">
				<p>- 其他方式登录 -</p>
				<ul>
					<li class="qq"><a href="#">
					<span class="icons w3layouts agileits"></span>
					<span class="text w3layouts agileits">QQ</span></a></li>
					<li class="weixin w3ls"><a href="#">
					<span class="icons w3layouts"></span>
					<span class="text w3layouts agileits">微信</span></a></li>
					<li class="weibo aits"><a href="#">
					<span class="icons agileits"></span>
					<span class="text w3layouts agileits">微博</span></a></li>
					<div class="clear"> </div>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="register w3layouts agileits">
			<h2>注 册</h2>
			<form id="registry">
				<input type="text" Name="name" placeholder="姓名" required="">
				<input type="password" Name="password" placeholder="密码" required="">
				<input type="text" Name="userName" placeholder="身份证号" required="">
				<input type="text" Name="phoneNumber" placeholder="手机号码" required="">
				<p>
					<input type="radio" name="gender" id="m" value="m"> <label for="m">男</label>
					<input type="radio" name="gender" id="f" value="f"> <label for="f">女</label>
				</p>
				<br/>
			</form>
			<div class="send-button w3layouts agileits">
				<form action="index.html">
					<input type="button" onclick="registry()" value="注册">
				</form>
			</div>
			<div class="clear"></div>
		</div>

		<div class="clear"></div>

	</div>

	<div class="footer">
		<p>Copyright &copy; 2024年1月5日</p>
	</div>

</body>
<!-- //Body -->

<script>
	function submitForm() {
		var form = document.getElementById('loginForm');
		var formData = new FormData(form);
		var username = formData.get('userName');
		var psw = formData.get('password');
		fetch('http://localhost:8888/user/login', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
			body: JSON.stringify({
				userName: username,
				password: psw
			}),
		}).then(response => {
			if (!response.ok) {
				throw new Error('Network response was not ok');
			}
			return response.json();
		}).then(data => {
			localStorage.setItem('token', data.data.token);
			localStorage.setItem('patientId', data.data.patientId);
			localStorage.setItem('doctorId', data.data.doctorId);
			window.location.href = 'index.html';
		})
	}

	function registry() {``
		var form = document.getElementById('registry');
		var formData = new FormData(form);
		var name = formData.get('name');
		var username = formData.get('userName');
		var psw = formData.get('password');
		var phoneNumber = formData.get('phoneNumber');
		var sex = formData.get('gender');
		fetch('http://localhost:8888/user/register', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
			body: JSON.stringify({
				nickName: name,
				userName: username,
				password: psw,
				phonenumber: phoneNumber,
				sex: sex
			}),
		}).then(response => {
			if (!response.ok) {
				throw new Error('Network response was not ok');
			}
			alert("注册成功")
			window.location.reload();
		})
	}
</script>

</html>